<template>
  <div>
    <a-collapse v-model="activeKey" :expandIconPosition="expandIconPosition">
      <a-collapse-panel header="This is panel header 1" key="1">
        <p>{{ text }}</p>
        <a-icon slot="extra" type="setting" @click="handleClick"></a-icon>
      </a-collapse-panel>
      <a-collapse-panel header="This is panel header 2" key="2" :disabled="false">
        <p>{{ text }}</p>
        <a-icon slot="extra" type="setting" @click="handleClick" />
      </a-collapse-panel>
      <a-collapse-panel header="This is panel header 3" key="3" disabled>
        <p>{{ text }}</p>
        <a-icon slot="extra" type="setting" @click="handleClick" />
      </a-collapse-panel>
    </a-collapse>
    <br />
    <span>Expand Icon Position:</span>
    <a-select v-model="expandIconPosition">
      <a-select-option value="left">left</a-select-option>
      <a-select-option value="right">right</a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
      activeKey: ["1"],
      expandIconPosition: "left"
    };
  },
  watch: {
    activeKey(key) {}
  },
  methods: {
    handleClick(event) {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }
  }
};
</script>
